@charset 'utf-8';
@import "public/_config.scss";
body{
	background-color: #f0f0f0;
}
.new{
	background-color: #fff;
	
	.item-vote{
		@include flex-box();
		margin: 0 pxToRem(20);
		padding: pxToRem(37) 0;
		@include border-bottom-m;
		&::after{
		    border-color: #d5d5d5;
		};
	}
		.act-photo{
			width: pxToRem(160);
			height: pxToRem(135);
			margin-right: pxToRem(24);
			@include set-bg-img( $name: "icon-placehold.png", $size: pxToRem(159) auto, $position: right center);
			border: 1px solid #efefef;
			&.questionnaire-photo{
				height: pxToRem(150);
				@include set-bg-img( $name: "icon-placehold2.png", $size: pxToRem(159) auto, $position: right center);
			}
		}
		.act-message{
			@include flex-item();
			.act-title{
				@include flex-box();
				padding-top: pxToRem(7);
				padding-bottom: pxToRem(20);
				.name{
					@include flex-item();
					color: #000;
					font-size: pxToRem(30);
					@include text-overflow(1);
					font-weight:bold;
				}
				.time{
					font-size: pxToRem(22);
					color: #686868;
					padding-left: pxToRem(5);
					@include prefixCss3($property: align-self, $value: center);
				}
				&.bottom-height{
					padding-bottom: pxToRem(7);
				}
			}
		}
			
		.act-mess{
			font-size: pxToRem(26);
			color: #686868;
			line-height: pxToRem(37);
			@include text-overflow(2);
			.rule{
				font-size: pxToRem(24);
				padding-left: pxToRem(10);
				color: #45cbc1;
			}
		}
		
	.vote-box{
		@include flex-box();
		padding: 0  pxToRem(20);
		.vote-item{
			@include flex-item();
			font-size: pxToRem(24);
			color: #686868;
			line-height: pxToRem(60);
			&.center{
				text-align: center;
			}
			&.right{
				text-align: right;
			}
		}
	}
		
}

.main{
	margin-top: pxToRem(20);
	background-color: #fff;
	.title{
		font-size: pxToRem(26);
		color: #5a5a5a; 
		line-height: pxToRem(70);
		padding: 0 pxToRem(20);
		@include border-bottom-m;
		&::after{
		    border-color: #d1d1d1;
		};
	}
	ul{
		li{
			@include flex-box();
			padding: pxToRem(18) pxToRem(20);
			@include border-bottom-m;
			&::after{
			    border-color: #e2e2e2;
			};
			&:last-of-type{
				&::after{
			        border: none;
			    }; 
			};
			.photo{
				width: pxToRem(104);
				height: pxToRem(104);
				border-radius: 50%;
				border: 1px solid #dcdcdc;
				width: pxToRem(84);
				height: pxToRem(84);
				@include set-bg-img( $name: "icon-placehold2.png", $size: pxToRem(104) auto, $position: center center);
			}
			.message{
				@include flex-item();
				margin: 0 pxToRem(10);
				@include prefixCss3($property: align-self, $value: center);
				.name{
					font-size: pxToRem(24);
					color: #131313;
					padding-bottom: pxToRem(16);
				}
				.progress{
					width: 100%;
					height: pxToRem(22);
					background-color: #d5d5d5;
					border-radius: pxToRem(22);
					.speed{
						width: 20%;
						height: pxToRem(22);
						background-color: #45cbc1;
						border-radius: pxToRem(22);
					}
				}
			}
			.vote{
				@include prefixCss3($property: align-self, $value: center);
				.ticket{
					text-align: center;
					font-size: pxToRem(24);
					color: #3dbbb2;
					padding-bottom: pxToRem(16);
				}
				.vote-throw{
					padding: 0 pxToRem(15);
					line-height: pxToRem(36);
					height: pxToRem(36);
					border-radius: pxToRem(27);
					text-align: center;
					border: 1px solid #131313;
				}
				.throw{
					color: #131313;
					font-size: pxToRem(22);
					padding-left: pxToRem(30);
					@include set-bg-img( $name: "icon-fabulous.png", $size: pxToRem(22) auto, $position: left center);
				}
				&.active{
					.throw{
						@include set-bg-img( $name: "icon-fabulous1.png", $size: pxToRem(22) auto, $position: left center);
					}
				}
			}
		}
	}
}




.ale{
	display: none;
	z-index: 2;
	position: relative;
	&.active{
		display: block;
	}
	.fixed{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.screen{
		background-color: #f0f0f0;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: pxToRem(640);
		border-radius: pxToRem(14);
		height: pxToRem(838);
		.title{
			@include flex-box();
			padding: pxToRem(34) pxToRem(40) pxToRem(30);
			@include border-bottom-m;
			&::after{
			    border-color: #b1b1b1;
			};
			.rule{
				@include flex-item();
				text-align: left;
				font-size: pxToRem(32);
				padding-left: pxToRem(40);
				@include set-bg-img( $name: "icon-rule.png", $size: pxToRem(28) auto, $position: left center);
				vertical-align: middle;
			}
			.close{
				width: pxToRem(26);
				height: pxToRem(26);
				@include set-bg-img( $name: "icon-close.png", $size: pxToRem(26) auto, $position: center center);
				@include prefixCss3($property: align-self, $value: center);
			}
		}	
		.content{
			margin: pxToRem(34) pxToRem(40);
			color: #999;
			@extend  %scroll;
			.one{
				margin-bottom: pxToRem(54);
				.til{
					font-size: pxToRem(28);
					line-height: pxToRem(40);
					.num{
						display: inline-block;
						font-size: pxToRem(22);
						height: pxToRem(30);
						line-height: pxToRem(30);
						width: pxToRem(30);
						text-align: center;
						background-color: #999;
						color: #fff;
						margin-right: pxToRem(12);
						border-radius: 50%;
					}
				}
				.message{
					font-size: pxToRem(26);
					line-height: pxToRem(40);
					padding-left: pxToRem(40);
				}
			}
		}	
	}
}
